<template>
	<div style="background-color: #E3E3E3;min-height: calc(100vh - 3em);color: #1f1f1f;padding-bottom: 3em;">

		<div style="text-align: center;font-size: 1.5em;margin-bottom: 1.0em;padding-top: 1.2em;">质保录入</div>

		<div class="row" style="margin-top: 1.4em;">
			<div class="inputlable">产品类型</div>
			<div class="inputright">
				<uni-data-checkbox v-model="obj.quTypeId" :localdata="quTypeList" @change="radioChange" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row" style="height: 1.8em;">
			<div class="inputlable">产品品牌</div>
			<div class="inputright" style="min-width: calc(100% - 6em);">
				<picker mode="selector" :range="quCaBrandList" range-key="brName" @change="onPickerChange_brand">
					<div style="display: flex;justify-content: space-between;">
						<div>
							<input type="text" v-model="obj.quCaBrandName" placeholder="请输入产品品牌" class="inputText" />
						</div>
						<div>
							<image src="/guarantee/static/imgs/daosanjiao.png" style="height: 2.0em;" mode="heightFix">
							</image>
						</div>
					</div>
				</picker>
			</div>
			<div class="clear"></div>
		</div>
		<div class="row" style="height: 1.8em;">
			<div class="inputlable">产品型号</div>
			<div class="inputright" style="min-width: calc(100% - 6em);">
				<picker mode="selector" :range="prModelList" range-key="prBrandName" @change="onPickerChange_model">
					<div style="display: flex;justify-content: space-between;">
						<div>
							<input type="text" v-model="obj.prModel" placeholder="请输入产品型号" class="inputText" />
						</div>
						<div>
							<image src="/guarantee/static/imgs/daosanjiao.png" style="height: 2.0em;" mode="heightFix">
							</image>
						</div>
					</div>
				</picker>
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">车主姓名</div>
			<div class="inputright">
				<input type="text" v-model="obj.quName" placeholder="请输入车主姓名" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">车主电话</div>
			<div class="inputright">
				<input type="text" v-model="obj.quPhone" placeholder="请输入车主电话" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">车架号</div>
			<div class="inputright">
				<input type="text" v-model="obj.quVin" placeholder="请输入车架号" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">车型</div>
			<div class="inputright">
				<input type="text" v-model="obj.quModel" placeholder="请输入车型" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">车牌号</div>
			<div class="inputright">
				<input type="text" v-model="obj.quLicencePlate" placeholder="请输入车牌号" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row" style="height: 1.8em;">
			<div class="inputlable">施工门店</div>
			<div class="inputright" style="min-width: calc(100% - 6em);">
				<picker mode="selector" :range="quShopList" range-key="joinName" @change="onPickerChange_shop">
					<div style="display: flex;justify-content: space-between;">
						<div>
							<input type="text" v-model="obj.quShopName" placeholder="请输入施工门店" class="inputText" />
						</div>
						<div>
							<image src="/guarantee/static/imgs/daosanjiao.png" style="height: 2.0em;" mode="heightFix">
							</image>
						</div>
					</div>
				</picker>
			</div>
			<div class="clear"></div>
		</div>
		<div class="row" style="height: 2.5em;">
			<div class="inputlable">施工时间</div>
			<div class="inputright">
				<div v-if="datetimePickerShow" style="position: absolute;z-index: 101; width: calc(100% - 9em);">
					<uni-datetime-picker type="date" v-model="obj.quBuildTime" :clear-icon="true" />
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">贴车价格</div>
			<div class="inputright">
				<input type="text" v-model="obj.quPasteMoney" placeholder="请输入贴车价格(CNY)" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">质保年限</div>
			<div class="inputright">
				<input type="text" v-model="obj.quAgeLimit" placeholder="请输入质保年限" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row" style="margin-top: 0.6em;">
			<div class="inputlable">质保编号</div>
			<div class="inputright">
				<input type="text" v-model="obj.quQualityNum" disabled="true" placeholder="请输入质保编号" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">膜筒序列号</div>
			<div class="inputright">
				<input type="text" v-model="obj.quFilmNum" placeholder="请输入膜筒序列号" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<template v-if="obj.quTypeId==102">
			<div class="row">
				<div class="inputlable">前挡质保编号</div>
				<div class="inputright">
					<input type="text" v-model="obj.quFrontNum" placeholder="请输入前挡质保编号" class="inputText" />
				</div>
				<div class="clear"></div>
			</div>
			<div class="row">
				<div class="inputlable">前挡膜筒序列号</div>
				<div class="inputright">
					<input type="text" v-model="obj.quFrontFilm" placeholder="请输入前挡膜筒序列号" class="inputText" />
				</div>
				<div class="clear"></div>
			</div>
			<div class="row">
				<div class="inputlable">侧后档质保编号</div>
				<div class="inputright">
					<input type="text" v-model="obj.quSideNum" placeholder="请输入前挡质保编号" class="inputText" />
				</div>
				<div class="clear"></div>
			</div>
			<div class="row">
				<div class="inputlable">侧后档膜筒序列号</div>
				<div class="inputright">
					<input type="text" v-model="obj.quSideFilm" placeholder="请输入前挡膜筒序列号" class="inputText" />
				</div>
				<div class="clear"></div>
			</div>
		</template>
		<div class="row">
			<div class="inputlable">备注信息</div>
			<div class="inputright">
				<input type="text" v-model="obj.remark" placeholder="请输入备注信息" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div style="position: relative;margin-top: 0.8em;">
			<div style="position: absolute;left: 1.5em;top: 2em;">施工图片</div>
			<div style="position: absolute; left: 7em;top: 0em;right: 0em;bottom: 0em;">
				<uni-file-picker  fileMediatype="image" mode="grid"
					@select="select" @progress="progress" @success="success" @fail="fail" />
			</div>
		</div>



		<div style="margin-top: 7em;">
			<button class="submitbt" @click="submit">提交质保</button>
		</div>
		<div style="font-size: 0.8em;display: flex; align-items: center;">
			<div style="margin-left: 1.5em;"><uni-data-checkbox multiple :localdata="agreeList"
					@change="handleChangeAgree" /></div>
			<div style="margin-left: -1.9em;">
				<div @click="openPopup" style="color: red;border-bottom: 1px solid red;">
					我同意以下[用户服务协议]与[个人信息保护政策]
				</div>
			</div>
		</div>
		<div style="margin-top: 1em;">&nbsp;</div>
	</div>

	<CustomTabbar ref="customTabbar">
	</CustomTabbar>

	<!--:style="{ backgroundColor: 'transparent' }"-->
	<uni-popup ref="popup" type="center" :maskClick="false">
		<div style="width: 80vw;padding: 0.5em;box-sizing: border-box; background-color: #fff; border-radius: 0.5em;">
			<div style="border-bottom: 1px solid #ccc;text-align: right;padding: 0.3em;">
				<div @click="colsePopup">关闭</div>
			</div>
			<div style="font-size: 0.9em;color: #848484;margin-top: 0.5em;padding: 0.5em;">
				<div style="text-align: center;">[用户服务协议]与[个人信息保护政策]</div>
				为有效保障您使用本服务的合法权益，您理解并同意接受以下规则:</br>
				1.您通过包括但不限于以下方式向服贸会数字平台发出的指令，均视为您本人的指令，不可撤回或撤销，您应自行对服贸会数字平台执行前述指令所产生的任何结果承担责任</br>
				2.通过您的服贸会数字平台账户和密码进行的所有操作:</br>
				通过与您的账号绑走的手机号码向服贸会数字平台发送的全部信息</br>
				3.通过与您的账号绑定的其他硬件、终端、软件、代号、编码、代码、其他账户名等有形体或无形体向服贸会数字平台发送的信息:</br>
				4.其他服贸会数字平台与您约走或服贸会数字平台认可的其他方式。</br>
			</div>
		</div>
	</uni-popup>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	import api from '@/common/httprequest.js'
	import CustomTabbar from '@/component/custom-tabbar.vue'

	//==============同意用户协议部分==============//
	let agree = ref(0);
	const agreeList = [{
		text: null,
		value: 0
	}];

	const handleChangeAgree = (e) => {
		console.log('e:', e);
		console.log('当前选中的值:', e.detail.value);
		if (e.detail.data.length > 0) {
			agree.value = 1;
		} else {
			agree.value = 0;
		}
	}

	let datetimePickerShow = ref(true);
	const popup = ref(null);
	const openPopup = () => {
		// 打开弹出层
		popup.value?.open();
		datetimePickerShow.value = false;
	}

	const colsePopup = () => {
		// 打开弹出层
		popup.value?.close()
		datetimePickerShow.value = true;
	}

	//=============同意用户协议部分==============//
	let obj = ref({
		id: null,
		quTypeId: 100, //产品类型id  漆面膜、太阳膜
		quCaBrand: null, //品牌名称id
		quCaBrandName: null, //品牌名称
		prModelId: null, //产品型号id
		prModel: null, //产品型号
		quName: null, //车主姓名
		quPhone: null, //车主电话
		quVin: null, //车架号
		quModel: null, //车型
		quLicencePlate: null, //车牌号
		quShop: null, //施工店名id
		quShopName: null, //施工店名
		quBuildTime: null, //施工时间
		quPasteMoney: null, //贴车价格
		quAgeLimit: null, //质保年限
		quQualityNum: null, //质保编号
		quFilmNum: null, //膜筒序列号
		quFrontNum: null, //前挡质保编号
		quFrontFilm: null, //前挡膜筒序列号
		quSideNum: null, //侧后档质保编号
		quSideFilm: null, //侧后档膜筒序列号
		quPic: null, //施工图片
		creatTime: null, //创建时间
		updateTime: null, //更新时间
		remark: null //备注
		//to_applet: null
	})

	//产品类型列表
	const quTypeList = [{
			text: '漆面膜',
			value: 100,
		},
		{
			text: '改色膜',
			value: 101,
		},
		{
			text: '太阳膜',
			value: 102,
		}
	];

	let quCaBrandList = reactive([]); //品牌列表
	let prModelList = reactive([]); //产品型号
	let quShopList = reactive([]); //施工门店列表


	const loadData = async () => {
		let result = {};
		//第一步：加载品牌列表
		await api.request({
			method: "Get",
			url: "/app/productBrand/list",
			params: {},
		}).then(res => {
			console.log('resaa', res);
			if (res.code == 200) {
				var list = res.data;
				//console.log('list', list);
				if (list.length > 0) {
					Object.assign(result, {
						'quCaBrandList': list.map(x => {
							return {
								'id': x.id,
								'brName': x.brName
							}
						})
					});
				}

			}
		});
		//第二步：加载加盟商
		await api.request({
			method: "Get",
			url: "/app/league/getLeagueInfo",
			params: {},
		}).then(res => {
			console.log('getLeagueInfo', res);
			if (res.code == 200) {
				var list = res.data;
				//console.log('splist', list);
				if (list.length > 0) {
					Object.assign(result, {
						'quShopList': list.map(x => {
							return {
								'id': x.id,
								'joinName': x.joinName
							}
						})
					});
				}

			}
		});

		return result;
	}

	//产品类型选中事件
	const radioChange = (e) => {
		//console.log('eeee', e);
		obj.value.quTypeId = e.detail.data.value;
		loadProductModel();
	}

	//品牌选中事件
	const onPickerChange_brand = (e) => {
		const index = e.detail.value;
		//console.log('aaindex', quCaBrandList[index].brName);
		//console.log('index-obj', quCaBrandList[index]);
		obj.value.quCaBrand = quCaBrandList[index].id;
		obj.value.quCaBrandName = quCaBrandList[index].brName;
		loadProductModel();
	}

	//产品型号列表选择事件
	const onPickerChange_model = (e) => {
		const index = e.detail.value;
		obj.value.prModelId = prModelList[index].id;
		obj.value.prModel = prModelList[index].prBrandName;
	}

	//施工门店列表选择事件
	const onPickerChange_shop = (e) => {
		const index = e.detail.value;
		obj.value.quShop = quShopList[index].id;
		obj.value.quShopName = quShopList[index].joinName;
		//console.log('index', index);
	}

	//加载型号
	const loadProductModel = () => {
		obj.value.prModelId = null;
		obj.value.prModel = null;
		prModelList.splice(0, prModelList.length);
		if (obj.value.quTypeId != null && obj.value.quCaBrand != null) {
			uni.showLoading({
				title: '数据处理中...'
			});
			api.request({
				method: "Get",
				url: "/app/productModel/list",
				params: {
					'prType': obj.value.quTypeId,
					'prBrand': obj.value.quCaBrand
				},
			}).then(res => {
				uni.hideLoading();
				console.log('resaa', res);
				if (res.code == 200) {
					var list = res.data;
					//console.log('pmlist', list);
					if (list.length > 0) {
						prModelList.push(...list.map(x => {
							return {
								'id': x.id,
								'prBrandName': x.prBrandName
							}
						}))
					}

				}
			});
		}
	}


	//=============图片上传方法开始============//
	let imageValue = reactive([]);
	// 获取上传状态
	const select = (res) => {
		let file = res.tempFiles[0];
		let baseURL = api.getUrl();

		uni.uploadFile({
			url: `${baseURL}/common/upload`, // 上传图片的接口
			filePath: file.path,
			name: 'file',
			formData: {},
			success(e) {
				let res = JSON.parse(e.data);
				//console.log('imgres', res);
				if (res.code == 200) {
					obj.value.quPic = res.fileName;
					//defaultImage.value = null;
				}
			},
			fail(err) {
				console.error('上传失败:', err);
			}
		});

	}
	// 获取上传进度
	const progress = (e) => {
		console.log('上传进度：', e)
	}
	// 上传成功
	const success = (e) => {
		console.log('上传成功')
	}
	// 上传失败
	const fail = (e) => {
		console.log('上传失败：', e)
	}
	//=============图片上传方法结束==================//

	onMounted(async () => {
		const query = getCurrentPages().pop().options;
		if (query.coNum) {
			obj.value.quQualityNum = query.coNum;
		}
		await loadData().then(res => {
			quCaBrandList.push(...res.quCaBrandList);
			quShopList.push(...res.quShopList);
		})
	})

	const submit = () => {
		if (agree.value == 0) {
			uni.showToast({
				title: '请先同意用户协议,请勾选！',
				icon: 'none',
				duration: 2000
			})
			return;
		}
		if (obj.value.quPhone == null) {
			uni.showToast({
				title: '车主电话不能为空！',
				icon: 'none',
				duration: 2000
			})
			return;
		}
		if (obj.value.quLicencePlate == null) {
			uni.showToast({
				title: '车牌号不能为空！',
				icon: 'none',
				duration: 2000
			})
			return;
		}
		if (obj.value.quShop == null) {
			uni.showToast({
				title: '施工店铺为必填项，请选择！',
				icon: 'none',
				duration: 2000
			})
			return;
		}
		if (obj.value.quCaBrand == null) {
			uni.showToast({
				title: '产品品牌为必填项，请选择！',
				icon: 'none',
				duration: 2000
			})
			return;
		}
		if (obj.value.prModelId == null) {
			uni.showToast({
				title: '产品型号为必填项，请选择！',
				icon: 'none',
				duration: 2000
			})
			return;
		}
		console.log('subobj', obj);
		uni.showLoading({
			title: '数据处理中...'
		});
		api.request({
			method: "post",
			url: "/app/guarantee/addguarantee",
			params: obj.value,
		}).then(res => {
			uni.hideLoading();
			console.log('postesaa', res);
			if (res.code == 200 && res.msg == "成功") {
				uni.showToast({
					title:'保存成功！',
					icon:'none',
					duration:2000
				})
				uni.redirectTo({
					url: '/guarantee/addlist'
				})
			}
		});
	
	}
</script>


<style>
	page {
		background-color: #E3E3E3;
	}
</style>
<style scoped>
	.submitbt {
		width: 90%;
		margin: 0 auto;
		height: 2.0em;
		line-height: 1.8em;
		font-size: 1.0em;
		background-color: #ccc;
		color: #fff;
	}


	.inputright {
		float: left;
		margin-left: 0.5em;
		min-width: calc(100% - 10em);
	}

	.inputlable {
		float: left;
		min-width: 5em;
		/*background-color: #F5F5F5;*/
		text-align: right;
	}

	.row {
		margin-left: 0.5em;
		margin-right: 0.5em;
		text-align: center;
		font-size: 1.0em;
		margin-top: 0.3em;
		overflow: hidden;
		border-bottom: 1px solid #8F8F8F;
		padding-top: 0.2em;
		padding-bottom: 0.2em;
	}

	.inputText {
		text-align: left;
		height: 2.0em;
		line-height: 2.0em;
		border: 0px;
		font-size: 0.8em;
		padding-left: 0.5em;
		padding-right: 0.5em;
		width: 100%;
	}

	.clear {
		clear: both;
	}
</style>